<template>
	<view>
		<view class="name">{{details.name}}</view>
		<image :src="details.img" mode=""></image>
		你当前的距离{{details.name}}有{{dis}}km
		<button style="width:fit-content;" @tap="setLine">到{{details.name}}去</button>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIGS
	} from "/utlis/config"
import {
		CONFIG
	} from "../../utlis/config"
	import {
		getMapDistance
	} from "../../utlis/tools.js"
	import {
		userStore
	} from "../../store/userStore.js"
	const store = userStore()
	onLoad((data) => {
		console.log(data.id)
		getDetails((data.id))
	})

	let details = ref({})
	let dis = ref()
	async function getDetails(id) {
		let res = await uni.$get(CONFIGS.leancloud2_url + "/1.1/classes/Senicitem/" +id)
		console.log(res)
		if (res.statusCode == 200) {
			details.value = res.data

			console.log(store.currentPos)

			console.log(details.value.lon, details.value.lat)
			dis.value = getMapDistance(details.value.lat,details.value.lon, store.currentPos.latitude, store
				.currentPos.longitude)
		}

	}

	function setLine() {
		uni.navigateTo({
			url: `/pages/playWebView/playWebView?slat=${store.currentPos.latitude}&slon=${store.currentPos.longitude}&elet=${details.value.lat}&elon=${details.value.lon}&name=${details.value.name}`
		})
	}
</script>

<style scoped lang="scss">
	// 定义一些常用颜色变量，方便统一修改和维护颜色风格
	$primary-color: #007aff;
	$text-color: #333;
	$sub-text-color: #666;
	$border-color: #ccc;
	$bg-color: #f8f8f8;

	// 整体页面容器样式
	page {
		padding: 10px;
		background-color: $bg-color;

		// 景点信息整体容器样式，采用弹性布局让内部元素垂直排列并居中对齐
		view {
			display: flex;
			flex-direction: column;
			align-items: center;

			// 景点名称样式
			.name {
				font-size: 20px;
				font-weight: bold;
				color: $text-color;
				border-bottom: 1px solid $border-color;
				padding-bottom: 5px;
				margin-bottom: 10px;

				// 添加文字阴影效果，让名称更突出
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
				// 当名称文字较长时自动换行
				word-break: break-all;
			}

			// 景点图片样式
			image {
				width: 100%;
				max-width: 300px;
				height: auto;
				display: block;
				margin: 10px auto;
				border-radius: 5px;
				object-fit: cover;

				// 添加图片过渡效果，变化时更平滑
				transition: all 0.3s ease;

				// 鼠标悬停时图片放大并稍微降低透明度，实现简单交互效果
				&:hover {
					transform: scale(1.05);
					opacity: 0.9;
				}

				// 图片添加内阴影边框，增加立体感
				box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
			}

			// 距离信息样式，采用弹性布局让图标和文字垂直居中对齐
			view[class=""] {
				font-size: 14px;
				color: $sub-text-color;
				margin-bottom: 10px;
				display: flex;
				align-items: center;

				// 通过伪元素添加表示距离的小图标（这里假设使用font-awesome图标字体库，需先引入）
				&::before {
					content: "\f041";
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					margin-right: 5px;
					color: $border-color;
				}
			}

			// 按钮样式
			button {
				background-color: $primary-color;
				color: white;
				border: none;
				border-radius: 4px;
				padding: 8px 15px;
				margin-top: 10px;
				cursor: pointer;

				// 添加按钮点击动画效果，按下时缩小一点
				&:active {
					transform: scale(0.95);
				}

				// 鼠标悬停时降低透明度
				&:hover {
					opacity: 0.8;
				}

				// 按钮禁用状态下的样式变化，改变背景色、文字颜色并禁止指针交互
				&:disabled {
					background-color: $border-color;
					color: $sub-text-color;
					cursor: not-allowed;
				}
			}
		}
	}

	// 媒体查询，针对小屏幕设备（这里以屏幕宽度小于600px为例）调整样式
	@media screen and (max-width: 600px) {
		page {
			view {
				.name {
					font-size: 18px;
				}

				view[class=""] {
					font-size: 12px;
				}

				button {
					padding: 6px 12px;
				}
			}
		}
	}
</style>